<template>
  <div>
      <Slots class="slot_list">
        <div @click="onClickReturn"><van-icon name="arrow-left" /></div>
        <div>砍价列表</div>
        <div></div>
      </Slots>
      <div class="searchlist">
     <div 
     class="searchlist_container"
     v-for="(item,index) in list" :key="index"
     @click="onClickSearch(item)">
        <div class="searchlist_wrapper">
            <img :src="item.pic" alt="">
        </div>
        <div class="searchlist_name">{{item.name}}</div>
     </div>
  </div>
  </div>
</template>

<script>
import Slots from "../components/slot/slot";
import axios from "axios";
export default {
    data(){
        return{
            list:[]
        }
    },
    components:{
        Slots
    },
    mounted(){
        console.log(this.$route.query.id);
        var id = this.$route.query.id
        axios.get("https://api.it120.cc/small4/shop/goods/list",{
            params:{
                categoryId:id
            }
        }).then(res=>{
            // console.log(res);
            this.list =res.data.data
            console.log(this.list);
        }).catch(error=>{
            console.log(error);
        })
    },
    methods:{
        onClickSearch(item){
            this.$router.push({
                path:"/listys",
                query:{
                    id:item.id
                }
            })
        },
        onClickReturn(){
            this.$router.push("/search")
        }
    }
}
</script>

<style>
.searchlist
{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 50px;
}
.searchlist_container
{
    width: 50%;
    height: 8rem;
    /* border: 1px solid black; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.searchlist_wrapper
{
    width: 100%;
    height: 80%;
}
.searchlist_wrapper img
{
    width: 100%;
    height: 100%;
}
.searchlist_name
{
    width: 100%;
    font-size: 0.5rem;
}
.slot_list
{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  border-bottom: 1px solid black;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
}
</style>